<template>
	<!-- 资产 -->
	<view class="balances-container view-bg">
		<!-- 信息 -->
		<view class="balances-information">
			<view class="view">
				<u-icon @click="isEys = !isEys" :name="isEys?'eye-fill': 'eye-off'" color="#fff" size="44"></u-icon>
			</view>
			<view class="balances-account">
				<text class="text">{{i18n.balances.total + '（USDT）'}}</text>
				<text class="price" v-if="isEys">{{totalwallet}}</text>
				<text class="price" v-else>{{'*****'}}</text>
				<view class="earnings">
					<text>{{i18n.balances.earnings + '：' + daywallet + 'USDT'}}
					</text>
					<u-loading v-show="isLoading" color="#EEC67F" size="30"></u-loading>
					<u-icon @click="loadingClick" v-show="!isLoading" name="reload" color="#fff" size="30"></u-icon>
				</view>
			</view>
		</view>
		<!-- 操作 -->
		<view class="preview-handle list-bg">
			<view class="preview-handle-box" v-for="item in handleList" :key="item.id" @click="previewHandle(item.id)">
				<view class="preview-handle-image-box">
					<image class="preview-handle-image" :src="'../../static/images/icon/' + item.icon +'.png'"
						mode="widthFix"></image>
				</view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 展示列表 -->
		<view class="show-list">
			<tabs :list="showList" :fontSize="32" @click="tabsClick" style="margin-bottom: 40rpx;"></tabs>
			<view class="show-list-data" v-for="item in showListData" :key="item.id">
				<view class="show-list-data-top dis-between white-text">
					<view class="top-left">
						<image class="show-images" :src="item.currency_name | imgUrl" mode="widthFix"></image>
						<text class="main-color">{{item.currency_name}}</text>
					</view>
					<view class="top-right">
						<text>{{item | priceHandle(showListDataIndex)}}</text>
						<text class="main-color">{{'CNY'}}</text>
					</view>
				</view>
				<view class="show-list-data-bottom dis-between white-text">
					<view class="bottom-left">
						<text class="main-color">{{i18n.balances.onOrders}}</text>
						<text>{{showListDataIndex === 'legal_wallet'? item.lock_legal_balance :showListDataIndex === 'change_wallet'? item.lock_change_balance: item.lock_lever_balance}}</text>
					</view>
					<view class="bottom-right">
						<text class="main-color">{{i18n.balances.available}}</text>
						<text>{{showListDataIndex === 'legal_wallet'? item.legal_balance :showListDataIndex === 'change_wallet'? item.change_balance: item.lever_balance}}</text>
					</view>
				</view>
			</view>
		</view>
		<tips-popup ref="tips"></tips-popup>
	</view>
</template>

<script>
	import Tabs from '@/components/Tabs/index.vue'
	import TipsPopup from '@/components/TipsPopup/index.vue'
	import {
		Toast
	} from '@/utils/util.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			Tabs,
			TipsPopup
		},
		filters: {
			priceHandle(item, index) {
				let number = 0;
				switch (index) {
					case 'legal_wallet':
						number = (Number(item.legal_balance) + Number(item.legal_balance)) * item.cny_price;
						break;
					case 'change_wallet':
						number = (Number(item.change_balance) + Number(item.change_balance)) * item.cny_price;
						break;
					case 'lever_wallet':
						number = (Number(item.lever_balance) + Number(item.lever_balance)) * item.cny_price;
						break;
				}
				return (Math.round((Number(number) * 100)) / 100).toFixed(2);
			},
			imgUrl(val) {
				let icon = '';
				switch (val) {
					case 'USDT':
						icon = 'usdt';
						break;
					case 'BTC':
						icon = 'btc';
						break;
					case 'ETH':
						icon = 'eth';
						break;
				}
				return '../../static/images/ui/' + icon + '.png';
			}
		},
		data() {
			return {
				isEys: true,
				isLoading: false,
				info: {},
				showListData: [],
				showListDataIndex: 'legal_wallet'
			}
		},
		computed: {
			...mapGetters(['token', 'balancesList', 'daywallet', 'totalwallet', 'is_open_tbi', 'is_open_cbiremarks',
				'is_open_cbi', 'is_open_tbiremarks', 'review_status', 'is_open_realdh',
				'is_open_grealdh',
				'is_open_realcbi', 'is_open_grealcbi', 'is_open_grealtbi', 'is_open_realtbi', 'is_open_grealhz', 'is_open_realhz',

			]),
			i18n() {
				return this.$t('message');
			},
			handleList() {
				let arry = [{
						icon: 'charge_money',
						title: this.$t('message').common.charge,
						id: 0
					}, {
						icon: 'withdraw_money',
						title: this.$t('message').common.mention,
						id: 1
					},
					{
						icon: 'exchange',
						title: this.$t('message').common.exchange,
						id: 2
					},
					{
						icon: 'Transferred',
						title: this.$t('message').common.transferred,
						id: 3
					}
				];
				return arry;
			},
			showList() {
				return [{
						title: this.$t('message').balances.period,
						value: 'legal_wallet'
					},
					{
						title: this.$t('message').balances.point,
						value: 'lever_wallet'
					},
					{
						title: this.$t('message').balances.excheage,
						value: 'change_wallet'
					}
				]
			}
		},
		onLoad() {
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: this.i18n.tabBar.balances
			});
		},
		activated() {
			if (this.token) return this.getShowList();
			this.$refs.tips.open('confirm', this.i18n.common.loginTips);
		},
		mounted() {
			if (this.token) return this.getShowList()
			this.$refs.tips.open('confirm', this.i18n.common.loginTips);
		},
		methods: {
			previewHandle(id) {
				switch (id) {
					case 0:
						if (!this.is_open_cbi) return Toast(this.is_open_cbiremarks);
						if (this.is_open_grealcbi && this.review_status !== 4) return Toast(this.i18n.common.seniorAuth);
						if (this.is_open_realcbi && this.review_status === 0) return Toast(this.i18n.common.primaryAuth);
						uni.navigateTo({
							url: '../index/passageway'
						})
						break;
					case 1:
						if (!this.is_open_tbi) return Toast(this.is_open_tbiremarks);
						if (this.is_open_grealtbi && this.review_status !== 4) return Toast(this.i18n.common.seniorAuth);
						if (this.is_open_realtbi && this.review_status === 0) return Toast(this.i18n.common.primaryAuth);
						uni.navigateTo({
							url: '/pages/mention/index'
						})
						break;
					case 2:
						if (this.is_open_grealdh && this.review_status !== 4) return Toast(this.i18n.common.seniorAuth);
						if (this.is_open_realdh && this.review_status === 0) return Toast(this.i18n.common.primaryAuth);
						uni.navigateTo({
							url: '/pages/exchange/index'
						})
						break;
					case 3:
						if (this.is_open_grealhz && this.review_status !== 4) return Toast(this.i18n.common.seniorAuth);
						if (this.is_open_realhz && this.review_status === 0) return Toast(this.i18n.common.primaryAuth);
						uni.navigateTo({
							url: '/pages/transferred/index'
						})
						break;
				}
			},
			loadingClick() {
				this.isLoading = true;
				setTimeout(() => {
					this.loadList();
					this.isLoading = false;
				}, 1500)
			},
			async loadList() {
				this.$store.dispatch('wallet/getbalancesList')
			},
			tabsClick(val) {
				this.showListDataIndex = val;
				this.getShowList()
			},
			async getShowList() {
				await this.loadList();
				if (!this.balancesList[this.showListDataIndex]) return;
				this.showListData = this.balancesList[this.showListDataIndex].balance;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balances-container {
		.balances-information {
			background-color: #f7bb51;
			height: 351rpx;
			padding: 70rpx 30rpx 60rpx;

			.view {
				text-align: right;
				height: 44rpx;
			}

			.balances-account {
				&>text {
					display: block;
					color: #fff;
					font-size: 26rpx;

					&:nth-child(3) {
						display: inline-block;
					}

					&.text {
						height: 24rpx;
						line-height: 24rpx;
						font-size: 24rpx;
						color: rgba(255, 255, 255, .54);
						margin-bottom: 24rpx;
					}

					&.price {
						font-size: 58rpx;
						font-weight: bold;
						height: 44rpx;
						line-height: 44rpx;
						margin-bottom: 61rpx;
					}
				}

				.earnings {
					color: #fff;
					font-size: 26rpx;
					height: 30rpx;
					display: flex;
					align-items: center;

					&>text {
						margin-right: 24rpx;
					}
				}
			}
		}

		.preview-handle {
			height: 220rpx;
			padding: 0 54rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.preview-handle-box {
				text-align: center;
				color: #fefefe;
				font-size: 26rpx;

				.preview-handle-image-box {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					border: 2rpx solid rgba(255, 255, 255, .54);
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto 24rpx;

					.preview-handle-image {
						width: 40rpx;
					}
				}
			}
		}

		.show-list {
			padding: 52rpx 30rpx 20rpx;
			margin-top: 20rpx;
			background-color: #21273F;

			.show-list-top {
				display: flex;
				justify-content: space-between;
				position: relative;
				padding-bottom: 20rpx;
				border-bottom: 1px solid rgba(255, 255, 255, .1);

				&>p {
					position: absolute;
					width: 56rpx;
					height: 4rpx;
					bottom: 0;
					transition: left .2s linear;
				}

				.show-list-top-box {
					color: rgba(255, 255, 255, .54);

					&.active {
						font-weight: bold;
						color: #EEC67F;
					}
				}
			}

			.show-list-data {
				font-size: 22rpx;
				margin-bottom: 14rpx;

				.main-color {
					font-size: 20rpx;
				}

				&>.show-list-data-top {
					height: 130rpx;
					align-items: center;
					padding: 40rpx 26rpx 32rpx 34rpx;
					margin-bottom: 4rpx;
					background-color: #2b304a;
					border-radius: 18rpx 18rpx 0 0;

					.top-left {
						height: 58rpx;
						display: flex;
						align-items: center;
					}

					.top-right {
						.main-color {
							margin-left: 48rpx;
						}
					}

					.show-images {
						width: 58rpx;
						height: 58rpx;
						margin-right: 30rpx;
					}
				}

				&>.show-list-data-bottom {
					height: 86rpx;
					align-items: center;
					background-color: #2b304a;
					border-radius: 0 0 18rpx 18rpx;
					padding: 24rpx 26rpx 36rpx 34rpx;

					.main-color {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
